<template>
    <div>
        <!-- 图片部分 -->
        <div class="img">
            <router-link to="/" tag="div" class="div">
                >
            </router-link>
            <img :src="allData.bannerImg" alt="">
        </div>
        <div class="banner">
                <p class="banner-one"><span>56</span></p>
                <p>{{allData.sightName}}</p>
        </div>
    </div>
</template>
<script>
    export default{
        props:{
            allData:Object
        }
    }
</script>
<style lang="stylus" scoped>
.img{
    display flex
    justify-content space-between
}
    .img .div{
        width 30px
        height 30px
        border-radius 30px
        color #fff
        background-color #ccc
        text-align center
        line-height 30px
        position absolute
        z-index 100
    }
    .img img{
        width 100%
    }
    .banner p{
        width 300px
        color #fff
    }
    .banner{
        text-align left 
        text-indent .2rem
        position relative
        top -50px
        font-size 18px
    }
    .banner .banner-one{
        width 60px
        height 20px
        line-height 20px
        text-align center
        border-radius 60px
        border:1px solid gray
        text-indent .5rem
        font-size 12px
    }
</style>